<template>
  <div class="from_bc" v-if="data_from.Message"></div>
  <heead></heead>
  <left></left>
  <div class="post_select">
    <el-input
        v-model="datareas.searchname"
        class="w-50 m-2"
        size="large"
        placeholder="请输入用户名"
        :prefix-icon="Search"
    />
    <el-button class="pos_1" type="primary" v-on:click="handleQueryAll">搜索</el-button>
    <el-button class="pos_2"  type="success" v-on:click="publish">发布签到</el-button>
    <el-button class="pos_3"  type="danger" v-on:click="get">手动签到</el-button>

    <el-table :data="data" stripe style="width: 720px">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="wxName" label="微信名" width="180" />
      <el-table-column prop="realName" label="真实姓名" width="180"/>
      <el-table-column prop="zt" label="状态" width="180"/>
    </el-table>
  </div>

  <div v-if="data_from.Message" class="from_post">
    <div class="pos_4">
      <el-form :model="form" >
        <el-form-item label="微信姓名">
          <el-input v-model="data_from.wxname"/></el-form-item>
      </el-form>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button type="danger" @click="get_erro">取消</el-button>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import Heead from "@/components/heead";
import Left from "@/components/left";
import {onMounted, reactive, ref} from 'vue';
import axios from "axios";
export default {
  name: "Qd",
  components: {Left, Heead},
  setup(){
    const data = ref();
    const data_from = reactive({
      wxname:'',
      realname:'',
      Message:false,
    });
    const onSubmit=()=>{
      console.log(data_from.wxname)
      if(data_from.wxname){
        axios.post("http://localhost:8090/update",{
          wxName:data_from.wxname
        }).then((resp)=>{
          console.log(resp);
          if(resp.data.success){
            alert("添加成功！！！")
          }else{
            alert("错误！")
          }
        }).catch((err)=>{
          alert("未知错误")
        })
      }else{
        alert("好像?...不完整啊哈哈哈哈")
      }
    };
    const get = () => {
      data_from.Message=true;
    }
    const get_erro=()=>{
      data_from.Message=false;
    };
    const datareas = reactive({
      searchname:'',
      showToast:false,
      toastMessage:''
    });

    const publish = () => {
      data_from.Message=false;
      axios.post("http://localhost:8090/publish").then((resp)=>
      {
        console.log(resp)
        if(resp.data.success){
          alert("发布成功")
        }else{
          alert("发布失败")
        }
      }).catch((eer)=>{
        console.log(eer)
      })
    };

    const handleQueryAll = () => {
      data_from.Message=false;
      console.log(datareas.searchname)
      axios.get("http://localhost:8090/rzall",{params:{
          realName:datareas.searchname,
        }}).then((resp) =>{
        console.log(resp.data);
        data.value = resp.data.content;
      }).catch((err) => {
      })
    };

    const handleResetPassword = (message) => {
      datareas.showToast = true;
      datareas.toastMessage = message;
    };

    onMounted(() =>{
      handleQueryAll();
    });
    return {
      handleQueryAll,
      data,
      data_from,
      datareas,
      get_erro,
      get,
      publish,
      onSubmit,
      handleResetPassword
    };
  }

}
</script>

<style scoped>
.post_select{
  position: absolute;
  top: 100px;
  left: 30%;
}
.from_post{
  width: 400px;
  height: 300px;
  z-index: 999;
  background-color: white;
  top: 18%;
  left: 40%;
  position: absolute;
}
.pos_1{
  position: absolute;
  top: 5px;
  left: 740px;
}
.pos_2{
  position: absolute;
  top: 5px;
  left: 800px;
}
.pos_3{
  position: absolute;
  top: 5px;
  left: 900px;
}
.from_bc{
  height: 100%;
  width: 100%;
  z-index: 2;
  opacity: 0.2;
  background-color: darkgray;
  border-radius: 20px 20px 20px 20px;
  position: absolute;
}
.pos_4{
  top: 15%;
  left: 10%;
  position: absolute;
}
</style>